<template>
    <div>
        <a-form layout="inline"
                :model="searchData"
                style="margin: 10px 0">
            <a-form-item>
                <a-input v-model:value="searchData.name" placeholder="商品名称"></a-input>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" @click="load">搜索</a-button>
            </a-form-item>
            <a-form-item>
                <a-button type="default" @click="rest">重置</a-button>
            </a-form-item>
        </a-form>
        <a-table :dataSource="goodsList"
                 :columns="columns"
                 :pagination="pagination"
                 @change="handlerChange"
                 bordered>
            <template #totalPrice="{text,record}">
                {{parseFloat(record.quantity * record.price).toFixed(2)}}
            </template>
        </a-table>
    </div>
</template>

<script>
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    import {message} from 'ant-design-vue';
    export default {
        name: "inventory-inventoryList",
        setup() {
            const columns = [
                {
                    title: 'ID',
                    dataIndex: 'id',
                    key: 'id',
                    align: 'center'
                },
                {
                    title: '商品名称',
                    dataIndex: 'name',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '商品单价',
                    dataIndex: 'price',
                    key: 'price',
                    align: 'center'
                },
                {
                    title: '库存数量',
                    dataIndex: 'quantity',
                    key: 'quantity',
                    align: 'center'
                },
                {
                    title: '总价值',
                    key: 'totalPrice',
                    slots: {customRender: 'totalPrice'},
                    align: 'center'
                },
            ]

            const goods = ref({})
            const goodsList = ref()
            const searchData = ref({})
            const pagination = ref({
                current: 1,
                pageSize: 6,
            })

            const load = () => {
                axios.get('/goods/list', {
                    params: {
                        pageNum: pagination.value.current,
                        pageSize: pagination.value.pageSize,
                        name: searchData.value.name,
                    }
                }).then(rs => {
                    console.log("查找结果：", rs)
                    goodsList.value = rs.data.data.list
                    pagination.value.total = rs.data.data.total
                })
            }

            const rest = () => {
                searchData.value = {}
                load()
            }

            const handlerChange = (pageInfo) => {
                pagination.value = pageInfo
                load()
            }


            onMounted(() => {
                load()
            })
            return {
                columns,
                pagination,
                handlerChange,
                searchData,
                load,
                rest,
                goods,
                goodsList,
            }
        }
    }
</script>

<style scoped>

</style>